<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="admin/common/common_css :: commonHeader('编辑系统角色')">
</head>
<link rel="stylesheet" th:href="@{/js/admin.ui/lib/zTree/v3/css/metroStyle/metroStyle.css}" type="text/css">
<body>
<article class="page-container">
    <form class="form form-horizontal" id="form-role-edit">
        <input type="hidden" id="roleId" name="roleId" th:value="${editRole.roleId }" />
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>角色名称：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <input type="text" class="input-text" placeholder="角色名称（必填）" th:value="${editRole.roleName }" id="roleName" name="roleName" maxlength="50" />
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2">角色说明：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <textarea name="roleDesc" maxlength="200" class="textarea"  placeholder="角色说明...200个字符以内" onKeyUp="javascript:textareaLength(this);"><th:block th:text="${editRole.roleDesc }"></th:block></textarea>
                <p class="textarea-numberbar"><em class="textarea-length"><span id="textareaLengthSpan">0</span></em>/200</p>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>菜单权限：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!-- 菜单树-->
                <ul id="menuTree" class="ztree" ></ul>
                <input type="hidden" name="menuIds" id='menuIds'/>
            </div>
        </div>
        <div class="row cl">
            <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>操作权限：</label>
            <div class="formControls col-xs-8 col-sm-9">
                <!-- 权限树-->
                <ul id="authorityTree" class="ztree" ></ul>
                <input type="hidden" name="authorityIds" id='authorityIds'/>
            </div>
        </div>
        <div class="row cl">
            <div style="text-align: center;">
                <button class="btn btn-primary radius" type="submit">
                    <i class="Hui-iconfont">&#xe632;</i> 保存
                </button>
                &nbsp;&nbsp;
                <button onClick="layer_close();" class="btn btn-default radius" type="button">
                    &nbsp;&nbsp;取消&nbsp;&nbsp;
                </button>
            </div>
        </div>
    </form>
</article>
<div th:include="admin/common/common_js :: onLoadJS"></div>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/jquery.validate.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/validate-methods.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/jquery.validation/1.14.0/messages_zh.js}"></script>
<script type="text/javascript" th:src="@{/js/admin.ui/lib/zTree/v3/js/jquery.ztree.all-3.5.min.js}"></script>
<script type="text/javascript" th:inline="javascript">
    // 权限树配置
    var treeSetting = {
        view: {selectedMulti: false},
        check: {enable: true},
        data: {simpleData: {enable: true}}
    };
    $(function(){
        $("#form-role-edit").validate({
            rules:{
                roleName:{required:true, minlength:2, maxlength: 50,remote: {
                    url: '/pestdiagnosis/sys/role/validateIsRoleExist',
                    type: 'post',
                    dataType: 'json',
                    data: {validateType:'roleName',roleId:function () {return $.trim($("#roleId").val());},roleName: function () {return $.trim($("#roleName").val());}},
                    dataFilter: function (data) {
                        if(data != null && data != '') {
                            if (eval('(' + data + ')').data == '0') {
                                return true;
                            } else {
                                return false;
                            }
                        } else {
                            return false;
                        }
                    }
                }}
            },
            messages:{
                roleName:{remote:'角色名称已经存在'}
            },
            onkeyup:false,
            focusCleanup:true,
            success:"valid",
            submitHandler:function(form){
                var menuTreeObj = $.fn.zTree.getZTreeObj("menuTree");
                var menuNodes = menuTreeObj.getCheckedNodes(true);
                var authorityTreeObj = $.fn.zTree.getZTreeObj("authorityTree");
                var authorityNodes = authorityTreeObj.getCheckedNodes(true);
                if(menuNodes.length  == 0) {
                    layer.msg('请选择角色所拥有的菜单权限', {icon: 2});
                } else if(authorityNodes.length  == 0) {
                    layer.msg('请选择角色所拥有的操作权限', {icon: 2});
                } else {
                    var menuIds = "";
                    for (var i = 0; i < menuNodes.length; i++) {
                        menuIds += menuNodes[i].id + ",";
                    }
                    $('#menuIds').val(menuIds);
                    var authorityIds = "";
                    for (var i = 0; i < authorityNodes.length; i++) {
                        authorityIds += authorityNodes[i].id + ",";
                    }
                    $('#authorityIds').val(authorityIds);
                    send(
                        '/pestdiagnosis/sys/role/edit',
                        $('#form-role-edit').serialize(),
                        function (data) {
                            if(data.result == 0) {
                                layer.msg(data.message, {icon: 1,time: 1500}, function() {
                                    window.parent.location.href = "/pestdiagnosis/sys/role/list";
                                });
                            } else {
                                layer.msg(data.message, {icon: 5,time: 1500});
                                $('#roleName').focus();
                            }
                        },
                        function (res) {

                        }

                    );

                }
            }
        });
        var authorityTreeData = [[${authorityTreeData}]];
        if(authorityTreeData != null && $.trim(authorityTreeData) != '') {
            var zNodes = eval('(' + authorityTreeData + ')');
            $.fn.zTree.init($("#authorityTree"), treeSetting, zNodes);
        }
        var menuTreeData = [[${menuTreeData}]];
        if(menuTreeData != null && $.trim(menuTreeData) != '') {
            var zNodes = eval('(' + menuTreeData + ')');
            $.fn.zTree.init($("#menuTree"), treeSetting, zNodes);
        }
    });
    // 计算文本域字符长度
    function textareaLength(obj) {
        $('#textareaLengthSpan').text($(obj).val().length);
    }
</script>
</body>
</html>